<template>
  <div class="product-detail-container" v-loading="loading">
    <div class="page-header">
      <h2>商品详情</h2>
      <div class="header-actions">
        <el-button type="primary" @click="handleEdit">编辑</el-button>
        <el-button @click="goBack">返回列表</el-button>
      </div>
    </div>

    <div v-if="product.id" class="product-content">
      <!-- 基本信息 -->
      <el-card class="detail-card">
        <div slot="header" class="card-header">
          <h3>基本信息</h3>
        </div>
        <div class="detail-item">
          <span class="detail-label">商品ID：</span>
          <span class="detail-value">{{ product.id }}</span>
        </div>
        <div class="detail-item">
          <span class="detail-label">商品名称：</span>
          <span class="detail-value">{{ product.name }}</span>
        </div>
        <div class="detail-item">
          <span class="detail-label">商品分类：</span>
          <span class="detail-value">{{ categoryName }}</span>
        </div>
        <div class="detail-item">
          <span class="detail-label">商品描述：</span>
          <span class="detail-value description">{{ product.description || '无' }}</span>
        </div>
        <div class="detail-item">
          <span class="detail-label">上架状态：</span>
          <span class="detail-value">
            <el-tag :type="product.status === 1 ? 'success' : 'info'">
              {{ product.status === 1 ? '已上架' : '已下架' }}
            </el-tag>
          </span>
        </div>
        <div class="detail-item">
          <span class="detail-label">创建时间：</span>
          <span class="detail-value">{{ product.createTime }}</span>
        </div>
        <div class="detail-item">
          <span class="detail-label">更新时间：</span>
          <span class="detail-value">{{ product.updateTime }}</span>
        </div>
      </el-card>

      <!-- 销售信息 -->
      <el-card class="detail-card">
        <div slot="header" class="card-header">
          <h3>销售信息</h3>
        </div>
        <div class="detail-item">
          <span class="detail-label">价格：</span>
          <span class="detail-value price">¥{{ product.price }}</span>
        </div>
        <div class="detail-item">
          <span class="detail-label">原价：</span>
          <span class="detail-value">¥{{ product.originalPrice }}</span>
        </div>
        <div class="detail-item">
          <span class="detail-label">库存：</span>
          <span class="detail-value">{{ product.stock }} {{ product.unit }}</span>
        </div>
        <div class="detail-item">
          <span class="detail-label">销量：</span>
          <span class="detail-value">{{ product.sales }} {{ product.unit }}</span>
        </div>
        <div class="detail-item">
          <span class="detail-label">商品单位：</span>
          <span class="detail-value">{{ product.unit }}</span>
        </div>
        <div class="detail-item">
          <span class="detail-label">商品重量：</span>
          <span class="detail-value">{{ product.weight }} kg</span>
        </div>
      </el-card>

      <!-- 图片信息 -->
      <el-card class="detail-card">
        <div slot="header" class="card-header">
          <h3>图片信息</h3>
        </div>
        <div class="detail-item">
          <span class="detail-label">主图：</span>
          <div class="detail-value">
            <el-image 
              style="width: 150px; height: 150px"
              :src="product.image" 
              :preview-src-list="[product.image]"
              fit="cover">
            </el-image>
          </div>
        </div>
        <div class="detail-item" v-if="productImages.length > 0">
          <span class="detail-label">图片集：</span>
          <div class="detail-value image-list">
            <el-image 
              v-for="(url, index) in productImages" 
              :key="index"
              style="width: 100px; height: 100px; margin-right: 10px; margin-bottom: 10px;"
              :src="url" 
              :preview-src-list="productImages"
              fit="cover">
            </el-image>
          </div>
        </div>
      </el-card>
    </div>

    <div v-else-if="!loading" class="no-data">
      <el-empty description="未找到商品信息"></el-empty>
    </div>
  </div>
</template>

<script>
import { getProductDetail } from '@/api/product';
import { getCategoryTree } from '@/api/category';

export default {
  name: 'ProductDetail',
  data() {
    return {
      loading: false,
      product: {},
      productImages: [],
      categories: [],
      categoryName: '未分类'
    }
  },
  created() {
    this.fetchCategories();
    const productId = this.$route.params.id;
    if (productId) {
      this.fetchProductDetail(productId);
    }
  },
  methods: {
    // 获取分类列表
    fetchCategories() {
      getCategoryTree()
        .then(res => {
          if (res.code === 200) {
            this.categories = this.flattenCategories(res.data || []);
          }
        })
        .catch(err => {
          console.error('获取分类失败', err);
          this.$message.error('获取分类失败');
        });
    },
    
    // 扁平化分类树
    flattenCategories(categories, result = []) {
      categories.forEach(category => {
        result.push(category);
        if (category.children && category.children.length > 0) {
          this.flattenCategories(category.children, result);
        }
      });
      return result;
    },
    
    // 获取商品详情
    fetchProductDetail(id) {
      this.loading = true;
      getProductDetail(id)
        .then(res => {
          if (res.code === 200) {
            this.product = res.data;
            
            // 处理图片集
            if (this.product.images) {
              try {
                this.productImages = JSON.parse(this.product.images);
              } catch (e) {
                console.error('解析图片集失败', e);
                this.productImages = [];
              }
            }
            
            // 查找分类名称
            if (this.product.categoryId) {
              const category = this.categories.find(item => item.id === this.product.categoryId);
              if (category) {
                this.categoryName = category.name;
              }
            }
          } else {
            this.$message.error(res.message || '获取商品详情失败');
          }
        })
        .catch(err => {
          console.error('获取商品详情失败', err);
          this.$message.error('获取商品详情失败');
        })
        .finally(() => {
          this.loading = false;
        });
    },
    
    // 编辑商品
    handleEdit() {
      this.$router.push(`/merchant/product/edit/${this.product.id}`);
    },
    
    // 返回列表
    goBack() {
      this.$router.push('/merchant/product/list');
    }
  }
}
</script>

<style>
.product-detail-container {
  padding: 20px;
}
.page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}
.detail-card {
  margin-bottom: 20px;
}
.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.card-header h3 {
  margin: 0;
  font-size: 18px;
  font-weight: 500;
}
.detail-item {
  margin-bottom: 15px;
  display: flex;
}
.detail-label {
  width: 100px;
  color: #606266;
  text-align: right;
  margin-right: 20px;
}
.detail-value {
  flex: 1;
  color: #303133;
}
.detail-value.price {
  color: #f56c6c;
  font-weight: bold;
}
.detail-value.description {
  line-height: 1.5;
  white-space: pre-wrap;
}
.image-list {
  display: flex;
  flex-wrap: wrap;
}
.no-data {
  margin-top: 100px;
}
</style> 